<template>
	<view class="pages" :class="themeName">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="upCallback" :up="upOption" :down="downOption"
			@down="downCallback">
			<view class="user-fans">
				<view class="header">
					<view class="bg-white p-20">
						<u-search v-model="keyword" shape="round" placeholder="请输入手机号搜索" @search="changeTab"
							@custom="changeTab" />
					</view>

					<view class="sort-bar flex bg-white">

						<view class="sort-bar-item flex row-center" @tap="sortChange(0)">
							<view :class="sortType == 0 ? 'item-active' : ''">团队排序</view>
							<view class="arrow-icon flex-col col-center row-center">
								<u-icon name="arrow-up-fill"
									:color="teamSort == 'asc' ? themeColor : '#333333'"></u-icon>
								<u-icon name="arrow-down-fill"
									:color="teamSort == 'desc' ? themeColor : '#333333'"></u-icon>
							</view>
						</view>

						<view class="sort-bar-item flex row-center">
							<view :class="sortType == 0 ? 'item-active' : ''">总收入：¥{{totalIncome}}</view>
						</view>

						<view class="sort-bar-item flex row-center">
							<view :class="sortType == 0 ? 'item-active' : ''">总业绩：¥{{orderAmount}}</view>
						</view>



					</view>
				</view>
				<view class="content">

					<view class="parent">
						<text>我的上级：{{parent.nickname}}</text>
						<text class="parent-id">ID:{{parent.sn}}</text>
					</view>

					<view class="card-box p-t-20">
						<view v-for="(item, index) in teamList" :key="index"
							class="card-item flex row-between bg-white p-20">
							<view class="flex">
								<u-image :src="item.user.avatar" border-radius="50%" width="100rpx" height="100rpx" />
								<view class="fans-info m-l-20">
									<view class="fans-name bold line-1">{{item.user.maskMobile}} - {{item.user.name}}
									</view>

									<view class="lighter xs">
										<view v-if="item.mobile" class="m-r-20">{{item.user.maskMobile}}</view>

										<view>团队总人数 - {{item.teamCount}}</view>
										<view>{{item.user.create_time}}</view>
									</view>
								</view>
								<view>
									<view class="lighter xs bold">¥{{item.orderAmount}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		SortEnum,
	} from '@/utils/enum';
	import {
		userTeam
	} from '@/api/user';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item";

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				upOption: {
					empty: {
						icon: '',
						tip: '暂无相关数据', // 提示
					}
				},
				active: 'all',
				sortType: 0,
				keyword: "",
				teamSort: SortEnum['NONE'],
				teamList: [],
				teamCount: 0,
				orderAmount: 0,
				parent: {},
				totalIncome: 0
			};
		},
		methods: {
			onRefresh() {
				this.teamList = []
				this.orderAmount = 0;
				this.parent = {}
				this.mescroll.resetUpScroll();
			},

			downOption() {
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},

			// 上拉加载 
			upCallback(page) {
				const {
					teamSort,
					keyword,
				} = this;
				const params = {
					keyword: keyword,
					sort: teamSort,
					page_size: page.size,
					page_no: page.num,
				};
				userTeam(params).then((data) => {
					if (page.num == 1) this.teamList = [];
					const curPageData = data.lists;
					const curPageLen = curPageData.length;
					this.teamList = this.teamList.concat(curPageData);
					// this.teamCount = data.extend.teamCount
					this.orderAmount = data.extend.orderAmount
					this.totalIncome = data.extend.total_income
					this.parent = data.extend.parent
					this.mescroll.endSuccess(curPageLen, data.count);
				}).catch(() => {
					this.mescroll.endErr()
				})

			},

			changeTab(val) {
				this.active = val
				this.onRefresh()
			},

			// 排序状态变化 
			sortChange(type) {
				let {
					teamSort,
				} = this;

				// 团队排序
				if (teamSort == SortEnum['DESC '] || teamSort == SortEnum['NONE']) {
					this.teamSort = SortEnum['ASC'];
				} else if (teamSort == SortEnum['ASC']) {
					this.teamSort = SortEnum['DESC'];
				}

				this.onRefresh()
			}
		}
	};
</script>
<style lang="scss">
	.parent {
		display: flex;
		flex-direction: column;
		// justify-content: space-between;
		background-color: #fff;
		padding: 20rpx;
		margin-top: 20rpx;

		&-id {
			margin-top: 10rpx;
		}
	}

	.user-fans {
		.header {
			.top-bar {
				padding: 18rpx 50rpx;
				height: 100rpx;

				.bar-item {
					flex: 1;
					padding: 0 30rpx;
					height: 58rpx;

					&:not(:last-of-type) {
						margin-right: 54rpx;
					}
				}

				.item-active {
					color: white;
					@include background_color();
					border-radius: 100rpx;
				}
			}

			.sort-bar {
				height: 80rpx;

				.sort-bar-item {
					flex: 1;

					.arrow-icon {
						transform: scale(0.36);
					}

					.item-active {
						@include font_color()
					}
				}
			}
		}
	}

	.content {
		.card-box {
			.card-item {
				.fans-name {
					width: 450rpx;
				}

				&:not(:last-of-type) {
					border-bottom: $-solid-border;
				}

				.fans-num {
					@include font_color()
				}
			}
		}
	}
</style>